<template>
  <div class="adviser-profile">
    <div class="banner">
      <van-image lazy-load
        width="90px"
        height="90px"
        :src="detail.tgInfo.avatar"
        class="avatar"
      />
      <div class="info">
        <div class="line">
          <h4>{{detail.tgInfo.name}}</h4>
          <p class="small">粉丝数 {{detail.followCount}}</p>
        </div>
        <p class="small">执业证号 {{detail.tgInfo.license}}</p>
        <div class="tag-list small">
          <span
            class="tag"
            v-for="tag in detail.tgInfo.tags"
            :key="tag.id"
          >{{tag.name}}</span>
        </div>
      </div>
      <van-tag v-if="detail.isFollow === 1" class="focus-btn" round color="#BBB8B9" text-color="#544B4B" @click.native="follow(-1)">已关注</van-tag>
      <van-tag v-else class="focus-btn" round color="#F1C4B1" text-color="#544B4B" @click.native="follow(1)">关 注</van-tag>
    </div>
    <div class="main">
      <h4>投顾简介</h4>
      <p>{{ detail.tgInfo.profile }}</p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { Tab, Tabs, Tag } from "vant";
import { getTgDetail, followTg } from '../../api/adviser';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Tag.name]: Tag
  },

  data() {
    return {
      detail: {
        followCount: 0,
        tgInfo: {},
        isFollow: -1
      }
    }
  },

  computed: {
    ...mapGetters(['isLogin'])
  },

  mounted() {
    this.getTgDetail();
    document.body.style.backgroundColor = '#fff';
  },

  beforeDestroy() {
    document.body.style.backgroundColor = '#f4f5fa';
  },

  methods: {
    ...mapActions(['login']),

    async getTgDetail() {
      const data = await getTgDetail(this.$route.params.id);
      this.detail.tgInfo = data.data.tgInfo;
      this.detail.followCount = data.data.followCount;
      this.detail.isFollow = data.data.isFollow;
    },

    async follow(isFollow) {
      if(!this.isLogin) {
        return this.login();
      }
      const data = await followTg(this.$route.params.id, isFollow);
      if(data.code === 0) {
        this.detail.isFollow = -this.detail.isFollow;
        isFollow === 1 ? this.$toast('关注成功') : this.$toast('取消关注成功');
      } else {
        this.$toast(data.message);
      }
    }
  }
};
</script>

<style lang="less">
.adviser-profile {
  .banner {
    color: #fff;
    background-color: #544b4b;
    display: flex;
    align-items: center;
    padding: 15px;
    padding-bottom: 35px;

    .avatar {
      margin-right: 15px;
      min-width: 90px;
      height: 90px;
      display: inline-block;
    }

    .line {
      * {
        display: inline-block;
      }

      h4 {
        font-size: 20px;
        margin-right: 15px;
      }
    }
    .small {
      font-size: 12px;
      line-height: 2.5;
    }

    .tag {
      color: #ddc6a7;
      background-color: #544b4b;
      border: 1px solid #ddc6a7;
      margin-right: 10px;
      border-radius: 5px;
      font-size: 12px;
      padding: 1px 3px;
    }

    .focus-btn {
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }

  .main {
    background-color: #fff;
    padding: 15px;

    p {
      margin: 10px 0;
    }
  }
}
</style>
